// DOM元素
const markdownInputEl = document.getElementById('markdown-input');
const previewOutputEl = document.getElementById('preview-output');
const newDocBtn = document.getElementById('new-doc');
const loadSampleBtn = document.getElementById('load-sample');
const toggleThemeBtn = document.getElementById('toggle-theme');

// 示例Markdown文本
const sampleMarkdown = `# Markdown示例文档

## 基本语法演示

### 文本样式
这是**粗体文本**，这是*斜体文本*，这是***粗斜体文本***。

这是<u>下划线文本</u>（HTML标签），这是<strike>删除线文本</strike>。

### 列表

#### 无序列表
- 项目1
- 项目2
  - 子项目2.1
  - 子项目2.2
- 项目3

#### 有序列表
1. 第一步
2. 第二步
   1. 子步骤2.1
   2. 子步骤2.2
3. 第三步

### 链接和图片

[GitHub官网](https://github.com)

![示例图片](https://via.placeholder.com/150)

### 引用
> 这是一段引用文本。
> 
> 这是引用的第二段。

### 代码

行内代码：使用``函数输出日志。

代码块：
```
javascript
function greet(name) {
    console.log("Hello, " + name + "!");
}

// 调用函数
greet("World");
```

### 表格

| 名称 | 类型 | 描述 |
|------|------|------|
| id | number | 用户ID |
| name | string | 用户名 |
| active | boolean | 是否激活 |

### 分隔线

---

### 任务列表

- [x] 已完成任务
- [ ] 未完成任务
- [ ] 另一个未完成任务
`;

// 初始化函数
function initPreviewer() {
    // 加载保存的Markdown文本
    loadSavedContent();
    
    // 添加事件监听器
    markdownInputEl.addEventListener('input', renderMarkdown);
    newDocBtn.addEventListener('click', newDocument);
    loadSampleBtn.addEventListener('click', loadSample);
    toggleThemeBtn.addEventListener('click', toggleTheme);
    
    // 初始化主题
    initTheme();
}

// Markdown转HTML渲染器
function renderMarkdown() {
    const markdown = markdownInputEl.value;
    const html = parseMarkdown(markdown);
    previewOutputEl.innerHTML = html;
    
    // 保存到本地存储
    saveToLocalStorage(markdown);
}

// Markdown解析函数
function parseMarkdown(markdown) {
    // 如果输入为空，显示欢迎信息
    if (!markdown.trim()) {
        return getWelcomeHTML();
    }
    
    let html = markdown;
    
    // 1. 处理代码块 ```language
    html = html.replace(/```([a-zA-Z0-9]*?)\n([\s\S]*?)```/g, (match, language, code) => {
        code = escapeHtml(code).trim();
        code = highlightCode(code, language);
        return `<pre><code class="language-${language}">${code}</code></pre>`;
    });
    
    // 2. 处理行内代码
    html = html.replace(/`([^`]+)`/g, (match, code) => {
        return `<code>${escapeHtml(code)}</code>`;
    });
    
    // 3. 处理标题
    html = html.replace(/^(#{1,6})\s+(.+)$/gm, (match, hashes, text) => {
        const level = hashes.length;
        return `<h${level}>${text}</h${level}>`;
    });
    
    // 4. 处理粗体和斜体
    html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>'); // 粗体
    html = html.replace(/\*(.+?)\*/g, '<em>$1</em>'); // 斜体
    html = html.replace(/__(.+?)__/g, '<strong>$1</strong>'); // 下划线粗体
    html = html.replace(/_(.+?)_/g, '<em>$1</em>'); // 下划线斜体
    
    // 5. 处理链接
    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
    
    // 6. 处理图片
    html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1">');
    
    // 7. 处理引用
    html = html.replace(/^>\s+(.+)$/gm, '<blockquote>$1</blockquote>');
    
    // 8. 处理无序列表
    html = processLists(html, /^[-*+]\s+(.+)$/gm, 'ul');
    
    // 9. 处理有序列表
    html = processLists(html, /^\d+\.\s+(.+)$/gm, 'ol');
    
    // 10. 处理分隔线
    html = html.replace(/^[-*_]{3,}$/gm, '<hr>');
    
    // 11. 处理任务列表
    html = html.replace(/^-\s*\[x\]\s+(.+)$/gm, '<li><input type="checkbox" checked disabled> $1</li>');
    html = html.replace(/^-\s*\[ \]\s+(.+)$/gm, '<li><input type="checkbox" disabled> $1</li>');
    
    // 12. 处理表格
    html = processTables(html);
    
    // 13. 处理段落（在所有其他处理之后）
    html = html.replace(/^(?!<h|<ul|<ol|<li|<blockquote|<pre|<hr|<table)(.*)$/gm, (match) => {
        // 跳过空行
        return match.trim() ? `<p>${match}</p>` : '';
    });
    
    return html;
}

// 处理列表（有序和无序）
function processLists(text, regex, tagName) {
    // 查找所有列表块
    const listBlocks = [];
    let match;
    let lastEnd = 0;
    let currentList = [];
    let currentStart = -1;
    
    // 找出所有列表项并分组
    while ((match = regex.exec(text)) !== null) {
        if (currentStart === -1) {
            currentStart = match.index - (match[0].indexOf(match[1]) - match[0].indexOf(match[0].split(/\s/)[0]) - 1);
        }
        
        // 检查是否有中断的列表
        if (match.index > lastEnd + 1) {
            if (currentList.length > 0) {
                listBlocks.push({
                    start: currentStart,
                    end: lastEnd,
                    items: currentList
                });
                currentList = [];
            }
            currentStart = match.index - (match[0].indexOf(match[1]) - match[0].indexOf(match[0].split(/\s/)[0]) - 1);
        }
        
        currentList.push(match[1]);
        lastEnd = match.index + match[0].length;
    }
    
    // 添加最后一个列表
    if (currentList.length > 0) {
        listBlocks.push({
            start: currentStart,
            end: lastEnd,
            items: currentList
        });
    }
    
    // 替换原始文本中的列表
    let result = text;
    let offset = 0;
    
    listBlocks.forEach(block => {
        const listHtml = `<${tagName}>${block.items.map(item => `<li>${item}</li>`).join('')}</${tagName}>`;
        const originalText = result.substring(block.start + offset, block.end + offset);
        result = result.replace(originalText, listHtml);
        offset += listHtml.length - originalText.length;
    });
    
    return result;
}

// 处理表格
function processTables(text) {
    // 查找表格部分（匹配表头行、分隔行和数据行）
    const tableRegex = /((?:[^\n]+\|[^\n]+\n)+)/g;
    
    return text.replace(tableRegex, (match) => {
        const lines = match.trim().split('\n');
        
        // 检查是否包含表格分隔行（---|---）
        const headerSeparatorIndex = lines.findIndex(line => /^\s*[-:|\s]+$/.test(line));
        
        if (headerSeparatorIndex === -1) {
            return match; // 不是表格，返回原始文本
        }
        
        let html = '<table>\n<thead>\n<tr>\n';
        
        // 表头
        const headers = lines[headerSeparatorIndex - 1].split('|');
        headers.forEach(header => {
            html += `  <th>${header.trim()}</th>\n`;
        });
        
        html += '</tr>\n</thead>\n<tbody>\n';
        
        // 表格数据行
        for (let i = headerSeparatorIndex + 1; i < lines.length; i++) {
            const cells = lines[i].split('|');
            if (cells.length > 1) { // 确保这一行确实有单元格
                html += '<tr>\n';
                cells.forEach(cell => {
                    html += `  <td>${cell.trim()}</td>\n`;
                });
                html += '</tr>\n';
            }
        }
        
        html += '</tbody>\n</table>';
        return html;
    });
}

// 简单的代码高亮
function highlightCode(code, language) {
    // 仅支持简单的JavaScript语法高亮
    if (language.toLowerCase() === 'javascript' || language.toLowerCase() === 'js') {
        // 关键字
        code = code.replace(/\b(function|if|else|for|while|return|let|const|var|true|false|null|undefined)\b/g, 
            '<span class="code-keyword">$1</span>');
        
        // 字符串
        code = code.replace(/(['"])(.*?)(?<!\\)\1/g, 
            '<span class="code-string">$1$2$1</span>');
        
        // 注释
        code = code.replace(/\/\/.*$/gm, 
            '<span class="code-comment">$&</span>');
        
        // 多行注释
        code = code.replace(/\/\*[\s\S]*?\*\//g, 
            '<span class="code-comment">$&</span>');
        
        // 数字
        code = code.replace(/\b\d+(\.\d+)?\b/g, 
            '<span class="code-number">$&</span>');
        
        // 函数名
        code = code.replace(/\b([a-zA-Z_$][\w$]*)\s*\(/g, 
            '<span class="code-function">$1</span>(');
    }
    
    return code;
}

// HTML转义函数
function escapeHtml(text) {
    const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return text.replace(/[&<>"']/g, (m) => map[m]);
}

// 获取欢迎信息HTML
function getWelcomeHTML() {
    return `
        <div class="welcome-message">
            <h2>👋 欢迎使用Markdown预览器</h2>
            <p>在左侧编辑区域输入Markdown文本，右侧将实时显示渲染后的效果。</p>
            <p>点击上方的「加载示例」按钮查看支持的Markdown语法示例。</p>
            <div class="code-example">
                <p>例如，尝试输入：</p>
                <pre># 一级标题
## 二级标题

这是<strong>粗体</strong>和<em>斜体</em>文本。

\`\`\`javascript
function hello() {
    console.log("Hello, Markdown!");
}
\`\`\`</pre>
            </div>
        </div>
    `;
}

// 新建文档
function newDocument() {
    if (markdownInputEl.value.trim() !== '' && !confirm('确定要新建文档吗？当前内容将被清除。')) {
        return;
    }
    
    markdownInputEl.value = '';
    renderMarkdown();
    localStorage.removeItem('markdownContent');
}

// 加载示例文档
function loadSample() {
    if (markdownInputEl.value.trim() !== '' && !confirm('确定要加载示例文档吗？当前内容将被替换。')) {
        return;
    }
    
    markdownInputEl.value = sampleMarkdown;
    renderMarkdown();
}

// 切换主题
function toggleTheme() {
    const isDarkMode = document.body.classList.toggle('dark-mode');
    localStorage.setItem('markdownPreviewerTheme', isDarkMode ? 'dark' : 'light');
    toggleThemeBtn.textContent = isDarkMode ? '☀️ 亮色模式' : '🌙 暗色模式';
}

// 初始化主题
function initTheme() {
    const savedTheme = localStorage.getItem('markdownPreviewerTheme');
    
    if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.body.classList.add('dark-mode');
        toggleThemeBtn.textContent = '☀️ 亮色模式';
    } else {
        document.body.classList.remove('dark-mode');
        toggleThemeBtn.textContent = '🌙 暗色模式';
    }
}

// 保存到本地存储
function saveToLocalStorage(content) {
    localStorage.setItem('markdownContent', content);
}

// 加载保存的内容
function loadSavedContent() {
    const savedContent = localStorage.getItem('markdownContent');
    if (savedContent) {
        markdownInputEl.value = savedContent;
        renderMarkdown();
    } else {
        // 显示欢迎信息
        previewOutputEl.innerHTML = getWelcomeHTML();
    }
}

// 当页面加载完成时初始化
window.addEventListener('DOMContentLoaded', initPreviewer);